<template>
	<view id="">
		<tui-tips ref="toast" v-if="index==0"></tui-tips>
		<tui-drawer mode="right" :visible="isopen">
			<headNav @close="closeOpen" @showTips="showTips"></headNav>
		</tui-drawer>
		<view class="page affiliate_dashboard_page affiliate_page">
			<view class="page_header">

				<view class="header_center">
					<topWallet :connect="hasToken" @onOpen="openModel"></topWallet>

					<view class="golden-title"><text>商城购物</text></view>
				</view><button class="menu_btn" @click="navs('showLeft')">
					<image src="/static/images/common/menu.svg" mode="widthFix">
				</button>
			</view>

			<navigator url="/share_links" @click="showDialog">
				<view class="add_link_btn">{{$t('Generate-Link')}}</view>
			</navigator>
			<view class="bottom box-container">
				<form :report-submit="true">
					<tui-list-cell :hover="false" padding="0" class="tui-boxs">
						<view class="tui-line-cell">
							<view class="tui-title">收货人</view>
							<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.recipient"
								placeholder="请输入收货人姓名" maxlength="15" type="text" />
						</view>
					</tui-list-cell>
					<tui-list-cell :hover="false" padding="0" class="tui-boxs">
						<view class="tui-line-cell">
							<view class="tui-title">手机号码</view>
							<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.mobile"
								placeholder="请输入收货人手机号码" maxlength="11" type="text" />
						</view>
					</tui-list-cell>
					<tui-list-cell :arrow="true" padding="0" class="tui-boxs">
						<view class="tui-line-cell" @click="showPicker">
							<view class="tui-title"><text class="tui-title-city-text">所在城市</text></view>
							<input placeholder-class="tui-phcolor" class="tui-input disabled"
								v-model="info.province + info.city + info.district" disabled name="city"
								placeholder="请选择城市" maxlength="50" type="text" @click="showPicker" />
						</view>
					</tui-list-cell>
					<tui-list-cell :hover="false" padding="0" class="tui-boxs">
						<view class="tui-line-cell">
							<view class="tui-title">收货地址</view>
							<input placeholder-class="tui-phcolor" class="tui-input" v-model="info.address"
								placeholder="请输入详细的收货地址" maxlength="50" type="text" />

						</view>
					</tui-list-cell>
					<view class="v-modal" v-show="selected" @click="selected=false"></view>
					<!-- 默认地址 -->
					<tui-list-cell :hover="false" padding="0" class="tui-boxs">
						<view class="tui-swipe-cell">
							<view>设为默认地址</view>
							<switch @change="switch2Change" color="#f4d56f" class="tui-switch-small" v-if="is_default"
								checked />
							<switch @change="switch2Change" color="#f4d56f" class="tui-switch-small"
								v-if="!is_default" />
						</view>
					</tui-list-cell>
					<!-- 保存地址 -->
					<view class="tui-addr-save">
						<tui-button shadow type="warning" height="88rpx" shape="circle"
							@click="saveAddress">保存收货地址</tui-button>
					</view>
					<view class="tui-del" v-if="adressid">
						<tui-button shadow type="gray" height="88rpx" shape="circle"
							@click="delAddress">删除收货地址</tui-button>
					</view>
				</form>
				<!-- 省市区 -->


				

			</view>
			<!--picker-view start-->
			<view class="tui-mask-screen" :class="[showPickerStatus?'tui-mask-show':'']" @tap="hidePicker"></view>
			<view class="tui-picker-box" :class="[showPickerStatus?'tui-pickerbox-show':'']">
				<view class="picker-header tui-list-item">
					<view class="btn-cancle" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="hidePicker">
						取消</view>
					<view class="btn-sure" hover-class="tui-opcity" :hover-stay-time="150" @tap.stop="picker">确定
					</view>
				</view>
				<picker-view indicator-style="height: 50px;" class="picker-view" :value="value"
					@change="columnPicker">
					<picker-view-column>
						<view v-for="(item,index) in provinceData" :key="index" class="item">{{item.province_name}}
						</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in cityData" :key="index" class="item">{{item.city_name}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-for="(item,index) in districtData" :key="index" class="item">{{item.district_name}}
						</view>
					</picker-view-column>
				</picker-view>
			</view>
			<!--picker-view end-->
			<view class="popups_container" v-if="showLink">
				<view class="popup">
					<view class="close" @click="closeLink"></view>
					<!-- <view class="content"> -->
					<view class="new_campaign_form">
						<image src="/static/images/entryscreen/genAffLink.png" class="new_campaign_form_header">
							<view class="input_label">我的代理会员链接昵称</view>
							<view class="input_box"><input class="name_input" maxlength="15" placeholder="命名您的代理会员链接"
									value=""></view>
							<view class="input_instruct">6 ~ 15个字符，只允许使用英文字母和数字。</view>
							<view class="gold_btn">创建链接</view>
					</view>
					<!-- </view> -->
				</view>
			</view>
		</view>
		<!-- wallet_pop-->
		<walletPop :walletOpen="open_wallet" :walletModelOpen="open_wallet" @closeWallet="closePop"
			@showTips="showTips"></walletPop>
		<tui-tips ref="toast" position="center"></tui-tips>
		<view v-if="showTabbar">
			<tui-tabbar :current="current" @click="tabbarSwitch" backdropFilter :backgroundColor="backgroundColor"
				:tabBar="tabBar" color="#777" selectedColor="#f4d56f"></tui-tabbar>
		</view>

	</view>
</template>

<script>
	import headNav from "@/components/nav/head_nav.vue"
	import topWallet from "@/components/nav/top_wallet.vue"
	import walletPop from "@/components/nav/wallet_pop.vue"
	export default {
		components: {
			headNav,
			topWallet,
			walletPop
		},
		data() {
			return {
				lists: ["公司", "家", "学校", "其他"],
				adressid: '',
				title: "",
				defaultArea: "",
				is_default: 0,
				selected: false,
				value: [0, 0, 0],
				showPickerStatus: false,
				isopen: false,
				curProvince: {
					name: '辽宁省',
					// 台湾省
					id: '37',
					// 34
				},
				curCity: {
					name: '',
					id: ''
				},
				curDistrict: {
					name: '',
					id: ''
				},

				info: {
					addressee: "",
					mobile: "",
					phone: "",
					province: "",
					city: "",
					district: "",
					address: "",
					zip_code: "",
					idcard: '',
				}, //  地址																													

				provinceData: [

				],
				cityData: [],
				districtData: [],
				provinceindex: "",
				cityindex: "",
				districtindex: "",
				showLink: false,
				hasToken: false,
				open_wallet: false,
				teamData: '',
				current: 0,
				isList: '',
				showTabbar: true,
				backgroundColor: '#191c1d',
				productInfo: '',
				banner: '',
				popupShow: false,
				isdisabled: false,
				isloading: false,
				goods_id: '',
				tabBar: [{
						pagePath: '/pages/dashboard/faq',
						text: this.$t('question'),
						iconPath: '/static/images/common/eb2ad3e9f15cd5c45523.svg',
						selectedIconPath: '/static/images/common/faq.png',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_links',
						text: this.$t('Promotion-link'),
						iconPath: '/static/images/common/1c328bea0664621ae940.svg',
						selectedIconPath: '/static/images/common/2ddef14ffefdf0893c68.svg',

						verify: true
					},
					{
						pagePath: '/pages/dashboard/share_report',
						text: this.$t('Income-statement'),
						iconPath: '/static/images/common/27ef8eecf3261b27000a.svg',
						selectedIconPath: '/static/images/common/e71ec10e6a3c2f14b631.svg',
						verify: true
					},
					{
						pagePath: '/pages/dashboard/dashboard',
						text: this.$t('control-panel'),
						iconPath: '/static/images/common/e5eb47a4e075e5a7a1e6.svg',
						selectedIconPath: '/static/images/common/0713c468a0e288a09478.svg',
						verify: true
					}
				],
				noClick: false,
				spec_list: '',
				subIndex: [],
				index: 0,
				show: false



			};
		},
		onLoad: function(options) {
			this.tui.haslogin();
			if (this.tui.isLogin()) {
				if (options.adressid) {

					this.adressid = options.adressid
					let ids = options.adressid;
					this.loadAddressInfo(ids);
				} else {
					this.is_default = 0;

					this.resetAddressPro();
				}
			}
		},
		methods: {
			// 读取修改地址信息
			loadAddressInfo(ids) {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					address_id: this.adressid
				};
				let address = this.tui.request('api/user/address', 'post', datas, 1000, 1, '', 'address');

				Promise.resolve(address).then((value) => {
					if (value.code == 200) {
						this.curProvince.name = value.data.province_name;
						this.curCity.name = value.data.city_name;
						this.curDistrict.name = value.data.district_name;
						this.info.address = value.data.address;
						this.info.recipient = value.data.recipient;
						this.info.mobile = value.data.mobile;
						this.is_default = value.data.is_default == 1 ? 1 : 0;
						// this.resetAddressPro();
						this.info.province = this.curProvince.name;
						this.info.city = this.curCity.name;
						this.info.district = this.curDistrict.name;
						this.curProvince.id = value.data.province_id
						this.curCity.id = value.data.city_id;
						this.curDistrict.id = value.data.district_id;
					} else {
						this.tui.toast(value.message);
					}
				})

			},
			//picker change切换事件
			columnPicker: function(e) {

				this.curDistrict.name = '';
				this.curCity.name = '';
				let value = e.detail.value;

				//如果两者下标不一致，表示滚动过
				if (this.value[0] !== value[0]) {

					this.provinceData = this.provinceData;
					this.resetAddressCity(this.provinceData[value[0]]['province_id']);
					this.resetAddressDistrict(this.cityData[value[1]]['city_id']);

					this.value = [value[0], 0, 0]
				} else if (this.value[1] !== value[1]) {
					this.provinceData = this.provinceData;
					this.cityData = this.cityData;
					this.resetAddressDistrict(this.cityData[value[1]]['city_id']);
					this.value = [value[0], value[1], 0]
				} else {
					this.value = value


				}
			},
			//确定按钮
			picker: function(e) {
				let value = this.value;
				this.info.province = this.provinceData[value[0]].province_name;
				this.info.city = this.cityData[value[1]].city_name;
				this.info.district = this.districtData[value[2]].district_name;

				this.curProvince.id = this.provinceData[value[0]].province_id;
				this.curCity.id = this.cityData[value[1]].city_id;
				this.curDistrict.id = this.districtData[value[2]].district_id;
				this.showPickerStatus = false
			},
			// 显示picker-view
			showPicker: function() {
				this.resetAddressPro();
				this.showPickerStatus = true

			},
			// 隐藏picker-view
			hidePicker: function() {
				this.showPickerStatus = false
			},
			// 获取省
			resetAddressPro() {
				
				let datas = {
					
				};
				let address = this.tui.request('api/user/provinces', 'post', datas, 1000, 1, '', 'provinces');
				Promise.resolve(address).then((value) => {
					if (value.code == 200) {

						this.provinceData = value.data;
						this.provinceData.forEach((item, index) => {
							if (this.curProvince.name == item.province_name) {
								this.curProvince.id = item.province_id;
								this.value = [index, 0, 0];
								this.provinceindex = index;
							}
						})

						this.resetAddressCity(this.curProvince.id);
					}
				})
			},
			// 获取市
			resetAddressCity(id) {
				
				let datas = {
					
					province_id: id
				};
				let curCityId = '';
				let address = this.tui.request('api/user/provinces', 'post', datas, 1000, 1, '', 'provinces');
				Promise.resolve(address).then((value) => {
					if (value.code == 200) {
						this.cityData = value.data;
						if (this.curCity.name) {
							this.cityData.forEach((item, index) => {
								if (this.curCity.name == item.city_name) {
									this.value[1] = index;
									this.cityindex = index
								}
							});
						} else {
							this.cityData.forEach((item, index) => {
								this.curCity.id = this.cityData[0].city_id;
							});
						}
						this.resetAddressDistrict(this.curCity.id)

					}
				})
			},
			// 获取区
			resetAddressDistrict(id) {
		
				let datas = {
					
					city_id: id
				};
				let address = this.tui.request('api/user/provinces', 'post', datas, 1000, 1, '', 'provinces');
				Promise.resolve(address).then((value) => {
					if (value.code == 200) {
						this.districtData = value.data;
						this.districtData.forEach((item, index) => {
							if (this.curDistrict.name == item.district_name) {
								this.curDistrict.id = item.district_id;
								this.value = [this.provinceindex, this.cityindex, index];
							} else {
								this.curDistrict.id = item.district_id;
							}
						});
					}
				})
			},
			// 提交
			saveAddress() {
				
				let defaults = this.is_default == 0 ? '0' : 1;

				let datas = {
					
					province_id: this.curProvince.id,
					city_id: this.curCity.id,
					district_id: this.curDistrict.id,
					address: this.info.address, // 街道地址
					recipient: this.info.recipient, // 收货人名称
					mobile: this.info.mobile, // 收货手机号

					is_default: defaults,
				};
				if (this.adressid) {
					datas.address_id = this.adressid;
					let address = this.tui.request('api/user/modifyAddress', 'post', datas, 1000, 1, '', 'modifyAddress');
					// 修改收货地址
					Promise.resolve(address).then((value) => {
						if (value.code == 200) {
							this.tui.toast(value.message);
							setTimeout(() => {
								// #ifdef H5
								let pages = getCurrentPages();
								let currPage = pages[pages.length - 1]; //当前页面
								let prevPage = pages[pages.length - 2]; //上一个页面

								prevPage.setData({
									isDoRefresh: true
								})
								// #endif

								//#ifdef MP-WEIXIN
								prevPage.onLoad()
								//#endif
								uni.navigateBack();
							}, 1000)
						} else {
							this.tui.toast(value.message);
						}
					})

				} else {
					// 新增收货地址
					let address = this.tui.request('api/user/addAddress', 'post', datas, 1000, 1, '', 'addAddress');
					// 修改收货地址
					Promise.resolve(address).then((value) => {
						if (value.code == 200) {
							this.tui.toast(value.message);
							setTimeout(() => {
								// #ifdef H5
								let pages = getCurrentPages();
								let currPage = pages[pages.length - 1]; //当前页面
								let prevPage = pages[pages.length - 2]; //上一个页面
								prevPage.setData({
									isDoRefresh: true
								})
								// #endif
								//#ifdef MP-WEIXIN
								prevPage.onLoad()
								//#endif
								uni.navigateBack();
							}, 1000)
						} else {
							this.tui.toast(value.message);
						}

					})
				}
			},
			delAddress() {
				let token = this.tui.getToken();
				let datas = {
					token: token,
					address_id: this.adressid,
				};
				let address = this.tui.request('api/user/delAddress', 'post', datas, 1000, 1, '', 'delAddress');
				Promise.resolve(address).then((value) => {
					if (value.code == 200) {
						this.tui.toast(value.message);
						setTimeout(() => {
							let pages = getCurrentPages();
							let currPage = pages[pages.length - 1]; //当前页面
							let prevPage = pages[pages.length - 2]; //上一个页面

							prevPage.setData({
								isDoRefresh: true
							})
							//#ifdef MP-WEIXIN
							prevPage.onLoad()
							//#endif
							uni.navigateBack();
						}, 1000)
					} else {
						this.tui.toast(value.message);
					}
				})

			},
			switch2Change: function(e) {
				if (e.target.value) {
					this.is_default = 1;
				} else {
					this.is_default = 0;
				}
			},
			navs() {
				this.isopen = true
				this.showTabbar = false
			},
			openModel() {
				this.open_wallet = true;
			},
			closeOpen() {
				this.isopen = false
				this.showTabbar = true
			},
			showPopup: function() {
				this.popupShow = true;
			},
			hidePopup: function() {
				this.popupShow = false;
			},
			goBack() {
				uni.navigateBack()
			},
			connectPurse() {
				this.showPurse = true
			},
			closePurse() {
				this.showPurse = false
			},
			showDialog() {
				this.showLink = true
			},
			closeLink() {
				this.showLink = false
			},
			closePop() {
				this.open_wallet = false;
			},
			showTips: function(msg, type) {

				let options = {
					msg: msg,
					duration: 2000,
					type: type
				};
				this.$refs.toast.showTips(options);
			},

		}
	}
</script>

<style lang="scss">
	@import '../../static/css/defalut.css';
	// page {
	// 	// background-color: #0c0d13;
	// 	color: #fff;
	// 	font-family: "Barlow Semi Condensed", sans-serif;
	// 	// font-size: 1.3vw;
	// 	margin: 0;
	// 	padding: 0;
	// 	overflow: hidden;
	// }

	.container {
		padding-bottom: 110rpx;
	}

	/* picker start*/

	.tui-mask-screen {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 99996;
		transition: all 0.3s ease-in-out;
		opacity: 0;
		visibility: hidden;
	}
	.tui-boxs{
		margin:20rpx;
		font-size: 26rpx !important;
		width:auto !important;
		background: #212a36 !important;
		color:#fff !important;
		font-size: 24rpx !important;
	}

	.tui-mask-show {
		opacity: 1;
		visibility: visible;
	}

	.disabled {
		pointer-events: none;
	}

	.tui-picker-box {
		width: 100%;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 99999;
		visibility: hidden;
		transform: translate3d(0, 100%, 0);
		transform-origin: center;
		transition: all 0.3s ease-in-out;
		min-height: 20rpx;
		background: #fff;
	}

	.tui-pickerbox-show {
		transform: translate3d(0, 0, 0);
		visibility: visible;
	}

	.picker-header {
		width: 100%;
		height: 90rpx;
		padding: 0 46rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 32rpx;
		background: #fff;
	}

	.tui-list-item::after {
		left: 0;
	}

	.btn-cancle {
		padding: 20rpx;
		color: #888;
	}

	.btn-sure {
		padding: 20rpx;
		color: #5677fc;
	}

	.picker-view {
		width: 100%;
		height: 260px;
	}

	.item {
		text-align: center;
	}

	.picker-item {
		text-align: center
	}

	.detailAddress {
		transform: rotate(180deg);
		display: inline-block;
		float: right;
	}

	.v-modal {
		// transition: opacity 2s;
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		opacity: 0.5;
		background: #000;
		z-index: 1000;
	}

	.tui-addr-box {
		padding: 20rpx 0;
	}
	.item{
		color:#000;
	}

	.tui-line-cell {
		width: 100%;
		padding: 24rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		border-bottom: none;
		align-items: center;
	}
.tui-list-cell::after{
	border:none !important;
}
	.tui-title {
		width: 180rpx;
		font-size: 26rpx;
	}

	.tui-title-city-text {
		width: 180rpx;
		height: 40rpx;
		display: block;
		line-height: 46rpx;
	}

	.tui-input {
		width: 500rpx;
		font-size: 26rpx;
	}

	.tui-input-city {
		flex: 1;
		height: 40rpx;
		font-size: 28rpx;
		padding-right: 30rpx;
	}

	.tui-phcolor {
		color: #ccc;
		font-size: 26rpx;
	}

	.tui-cell-title {
		font-size: 28rpx;
	}

	.tui-addr-label {
		margin-left: 70rpx;
	}

	.tui-label-item {
		width: 76rpx;
		height: 40rpx;
		border: 1rpx solid rgb(136, 136, 136);
		border-radius: 6rpx;
		font-size: 26rpx;
		text-align: center;
		line-height: 40rpx;
		margin-right: 20rpx;
		display: inline-block;
		transform: scale(0.9);
	}

	.tui-label-active {
		background: #E41F19;
		border-color: #E41F19;
		color: #fff;
	}

	.tui-swipe-cell {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #212a36 !important;
		padding: 10rpx 24rpx;
		box-sizing: border-box;
		border-radius: 6rpx;
		overflow: hidden;
		font-size: 26rpx;
	}

	.tui-switch-small {
		transform: scale(0.8);
		transform-origin: 100% center;
	}

	/* #ifndef H5 */
	.tui-switch-small .wx-switch-input {
		margin: 0 !important;
	}

	/* #endif */

	/* #ifdef H5 */
	>>>uni-switch .uni-switch-input {
		margin-right: 0 !important;
	}

	/* #endif */

	.tui-addr-save {
		padding: 24rpx;
		margin-top: 100rpx;
	}

	.tui-del {
		padding: 24rpx;
	}

	.top-none {
		padding-top: 0px !important;
	}

	.view-box {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 995;
	}

	.pl24 {
		padding-left: 12px;
	}

	.h32 {
		height: 16px;
	}

	.close {
		background: rgba(0, 0, 0, 0) url(../../static/images/common/close.svg) center no-repeat;
		width: 40rpx;
		height: 40rpx;
	}

	.w32 {
		width: 16px;
	}

	.point-price {
		font-size: 34rpx;
	}

	.yui-point-price {
		font-size: 30rpx;
		color: #f5b82b
	}

	.tui-popup-box-center-small {
		font-size: 24rpx;
		color: #f79229
	}

	.yui-attr-box {
		background-color: rgb(253, 235, 224);
		margin: 0rpx 28rpx;
		border-radius: 20rpx;
	}

	.tui-popup-box-center {
		text-align: center;
		margin-top: 40rpx;
		margin-bottom: 40rpx;
		font-size: 30rpx !important;
	}

	.yui-model-pick-list {
		font-size: 28rpx;
		font-weight: bold;
		margin-bottom: 10rpx;
		color: #333;
	}

	.view {
		width: 100%;
		font-size: 18px;
		line-height: 18px;
		font-weight: 500;
		height: 32px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.yui-model-spec-list {
		margin-left: 30rpx;
		margin-bottom: 30rpx;
	}

	.sele-list-block {
		display: inline-block;
		margin-bottom: 16rpx;
	}

	.concne-one-texts {
		margin-top: 32rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: bold;
		margin-bottom: 20rpx;
		line-height: 32rpx;
		color: #1f1f1f;
	}

	.concne-one-span {

		background: rgba(169, 169, 169, 0.24);
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #333333;
		margin-right: 20rpx;
	}

	.concne-one-span2 {

		background: rgba(253, 168, 174, 0.2);
		border-radius: 16rpx;
		padding: 6rpx 20rpx;
		font-size: 24rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		line-height: 32rpx;
		color: #f73333;
		margin-right: 20rpx;
	}

	.price-title {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.view-icon {
		position: fixed;
		top: 0;
		left: 10px;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		height: 32px;
		transform: translateZ(0);
		z-index: 9999;
	}

	.dh-icon {
		width: 74%;
		align-items: center;
		margin-top: 14%;
		margin-left: 14%;
		height: 74%;
	}

	.view-icon .tui-badge {
		background: #e41f19 !important;
		position: absolute;
		right: -4px;
	}

	.pro-nt {
		background: rgba(0, 0, 0, 0.2);
		width: 76rpx;
		height: 76rpx;
		border-radius: 10rpx;
		margin-left: -12rpx;
		margin-right: 20rpx;
	}

	.tui-icon-ml {
		margin-left: 20rpx;
	}

	.tui-icon-box {
		position: relative;
		height: 20px !important;
		width: 20px !important;
		padding: 6px !important;

		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-banner-swiper {
		margin: 20rpx;
		margin-bottom: 0rpx;
		position: relative;
	}

	.price-box {
		background: linear-gradient(to left, #ff3b00, #ff0018);
		height: 112rpx;
		line-height: 34rpx !important;
	}

	.pro-prices {
		display: flex;
	}

	.pro-price {
		color: #fff
	}

	.normal-price {
		font-size: 46rpx;
	}

	.normal-prices {
		font-size: 30rpx;
	}

	.pro-price-nm {
		font-size: 32rpx;
		font-weight: bold;
	}

	.coupon_voucher {
		width: 100%;
		display: flex;
		color: #c88717;
		/* background:linear-gradient(to left, #f5f4f0, #fffffb); */
		background: #f3a229;
		padding: 6rpx 30rpx;
		border-top: 6px solid;
		box-shadow: 0 0 6px 0 rgba(0, 0, 0, .1);
		border-radius: 6px;
	}

	.tui-coupon-item-right {
		flex: 1;
		height: 150rpx;
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 24rpx;
		box-sizing: border-box;
		overflow: hidden;
	}

	.font12 {
		font-size: 26rpx;
	}

	.tui-coupon-item-left {
		width: 358rpx;
		/* 		height: 110rpx; */
		position: relative;
		z-index: 2;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		/* 	flex-direction: column; */
		flex-shrink: 0;
	}

	.tui-coupon-intro {
		margin-top: 4rpx;
		padding: 4px 5px;
		font-size: 24rpx;
		color: #ffffff
	}

	.tui-coupon-price-box {
		display: flex;
		color: #ffffff;
		align-items: flex-end;
	}

	.tui-coupon-price-sign {
		font-size: 30rpx;
	}

	.tui-coupon-price {
		font-size: 66rpx;
		line-height: 68rpx;
		font-weight: bold;
	}

	.tui-price-small {
		font-size: 58rpx !important;
		line-height: 56rpx !important;
	}

	.line-through {
		font-size: 26rpx;
		line-height: 1rpx;
		text-decoration: line-through;
		color: #fff;
		opacity: .9;
		font-weight: normal;
	}

	.tui-banner-tag {
		position: absolute;
		color: #fff;
		bottom: 30rpx;
		right: 0;
	}

	.tui-slide-image {
		width: 100%;
		display: block;
	}

	/*顶部菜单*/

	.tui-menu-box {
		box-sizing: border-box;
	}

	.tui-menu-header {
		font-size: 34rpx;
		color: #fff;
		height: 32px;
		display: flex;
		align-items: center;
	}

	.tui-btn-coupon {
		margin: 20rpx 40rpx;
	}

	.coupon-title {
		text-align: center;
		margin-bottom: 30rpx;
	}

	.tui-coupon-radio {
		transform: scale(0.7);
		transform-origin: 100% center;
	}

	.tui-coupon-content {
		width: 82%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.tui-coupon-title-box {
		display: flex;
		align-items: center;
	}

	.tui-coupon-btn {
		padding: 12rpx 18rpx;
		background: #b15a11;
		color: #fff;
		border-radius: 24rpx;
		font-size: 25rpx;
		/* 	line-height: 25rpx; */
		display: flex;
		align-items: center;
		justify-content: center;
		transform: scale(0.9);
		transform-origin: 0 center;
		flex-shrink: 0;
	}

	.tui-menu-itembox {
		color: #fff;
		padding: 40rpx 10rpx 0 10rpx;
		box-sizing: border-box;
		display: flex;
		flex-wrap: wrap;
		font-size: 26rpx;
	}

	.tui-menu-item {
		width: 22%;
		height: 160rpx;
		border-radius: 24rpx;
		display: flex;
		align-items: center;
		/* flex-direction: column; */
		justify-content: center;
		background: rgba(0, 0, 0, 0.4);
		margin-right: 4%;
		margin-bottom: 4%;
	}

	.tui-menu-item:nth-of-type(4n) {
		margin-right: 0;
	}

	.item-left-m:nth-child(2n) {
		margin-left: 20rpx;
		border-left: 1px dashed #f1f1f1;
		padding-left: 20rpx;
	}

	.tui-badge-box {
		position: relative;
	}

	.tui-badge-box .tui-badge-class {
		position: absolute;
		top: -8px;
		right: -8px;
	}

	.tui-msg-badge {
		top: -10px;
	}

	.tui-icon-up_box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-menu-text {
		padding-top: 12rpx;
	}

	.tui-opcity .tui-menu-text,
	.tui-opcity .tui-badge-box {
		opacity: 0.5;
		transition: opacity 0.2s ease-in-out;
	}

	/*顶部菜单*/

	/*内容 部分*/

	.tui-padding {
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	/* #ifdef H5 */
	.tui-ptop {
		padding-top: 44px;
	}

	/* #endif */

	.tui-size {
		font-size: 24rpx;
		line-height: 24rpx;
	}

	.tui-gray {
		color: #999;
	}

	.tui-icon-red {
		color: #ff201f;
	}

	.tui-border-radius {
		border-bottom-left-radius: 24rpx;
		border-bottom-right-radius: 24rpx;
		overflow: hidden;
	}

	.tui-radius-all {
		border-radius: 24rpx;
		overflow: hidden;
	}

	.tui-mtop {
		margin-top: 26rpx;
	}

	.tui-pro-detail {
		box-sizing: border-box;
		color: #333;
		margin: 20rpx;
		margin-top: 0rpx;
	}

	.tui-product-title {
		background: #212a36;
		color: #fff;
		padding: 30rpx 0;
	}

	.tui-pro-pricebox {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #f4d56f;
		font-size: 36rpx;
		font-weight: bold;
		line-height: 44rpx;
	}

	.tui-pro-price {
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.tui-coin {
		margin-top: 10rpx;
		margin-left: 10rpx;
	}

	.tui-price {
		font-size: 58rpx;
	}

	.tui-original-price {
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 10rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-line-through {
		text-decoration: line-through;
	}

	.tui-collection {
		color: #333;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		height: 44rpx;
	}

	.tui-scale-collection {
		transform: scale(0.7);
		transform-origin: center 90%;
		line-height: 24rpx;
		font-weight: normal;
		margin-top: 4rpx;
	}

	.tui-pro-titbox {
		font-size: 32rpx;
		font-weight: 500;
		position: relative;
		padding: 0 150rpx 0 30rpx;
		box-sizing: border-box;
	}

	.tui-pro-title {
		padding-top: 20rpx;
	}

	.tui-share-btn {
		display: block;
		background: transparent;
		margin: 0;
		padding: 0;
		border-radius: 0;
		border: 0;
	}

	.tui-share-btn::after {
		border: 0;
	}

	.tui-share-box {
		display: flex;
		align-items: center;
	}

	.tui-share-position {
		position: absolute;
		right: 0;
		top: 30rpx;
	}

	.tui-share-text {
		padding-left: 8rpx;
	}

	.tui-sub-title {
		padding: 20rpx 0;
		line-height: 32rpx;
	}

	.tui-sale-info {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-top: 30rpx;
	}

	.tui-discount-box {
		background: #fff;
	}

	.tui-list-cell {
		width: 100%;
		position: relative;
		display: flex;
		align-items: center;
		font-size: 26rpx;
		line-height: 26rpx;
		padding: 36rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-right {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
	}

	.tui-top40 {
		top: 40rpx !important;
	}

	.tui-bold {
		font-weight: bold;
	}

	.bottom {
		margin-bottom: 100rpx;
	}

	.tui-list-cell::after {
		content: '';
		position: absolute;
		border-bottom: 1rpx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 126rpx;
	}

	.tui-last::after {
		border-bottom: 0 !important;
	}

	.tui-flex-center {
		display: flex;
		align-items: center;
	}


	.tui-cell-title {
		width: 66rpx;
		padding-right: 30rpx;
		flex-shrink: 0;
	}

	.goods-button {
		width: 100%;
		line-height: 80rpx;
		;

		border-radius: .4em;
		background-color: #f4d56f;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;

	}

	.tui-promotion-box {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
		width: 80%;
	}

	.tui-promotion-box text {
		width: 70%;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.tui-basic-info {
		background: #fff;
	}

	.tui-addr-box {
		width: 76%;
	}

	.tui-addr-item {
		padding: 10rpx;
		line-height: 34rpx;
	}

	.tui-guarantee {
		background: #fdfdfd;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 30rpx 30rpx 30rpx;
		font-size: 24rpx;
	}

	.tui-guarantee-item {
		color: #999;
		padding-right: 30rpx;
		padding-top: 10rpx;
	}

	.tui-pl {
		padding-left: 4rpx;
	}

	.tui-cmt-box {
		background: #fff;
	}

	.tui-between {
		justify-content: space-between !important;
	}

	.tui-cmt-all {
		color: #ff201f;
		padding-right: 8rpx;
	}

	.tui-cmt-content {
		font-size: 26rpx;
	}

	.tui-cmt-user {
		display: flex;
		align-items: center;
	}

	.tui-acatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 30rpx;
		display: block;
		margin-right: 16rpx;
	}

	.tui-cmt {
		padding: 14rpx 0;
	}

	.tui-attr {
		font-size: 24rpx;
		color: #999;
		padding: 6rpx 0;
	}

	.tui-cmt-btn {
		padding: 50rpx 0 30rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-nomore-box {
		padding-top: 10rpx;
	}

	.tui-product-img {
		margin-top: 40rpx;
		display: flex;
		padding: 20rpx;
		font-size: 24rpx;
		min-height: 500rpx;
		background: #212a36;
		color: #fff;
		flex-direction: column;
		transform: translateZ(0);
	}

	.tui-product-img image {
		width: 100%;
		display: block;
	}

	/*底部操作栏*/

	.tui-col-7 {
		width: 58.33333333%;
	}

	.tui-col-12 {
		width: 100%;
	}

	.tui-col-5 {
		width: 41.66666667%;
	}

	.tui-operation {
		position: absolute;
		bottom: 160rpx;

		background-color: #f4d56f;
		border-radius: 20rpx;

		width: 94%;
		margin-right: 20rpx;
		margin-left: 20rpx;
		align-items: center;
		justify-content: space-between;


	}

	.goods-button {
		width: 100%;
	}

	.tui-safearea-bottom {
		width: 100%;
		height: env(safe-area-inset-bottom);
	}



	.tui-scale-small {
		transform: scale(0.9);
		transform-origin: center center;
	}

	.tui-operation-right {
		height: 80rpx;
		padding-top: 0;
	}

	.tui-right-flex {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-flex-1 {
		flex: 1;
		padding: 16rpx;
	}

	/*底部操作栏*/

	/*底部选择弹层*/

	.tui-popup-class {
		border-top-left-radius: 24rpx;
		border-top-right-radius: 24rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-popup-box {
		background: #212a36;
		position: relative;
		padding: 30rpx 0 100rpx 0;
	}

	.tui-popup-btn {
		width: 100%;
		position: absolute;
		left: 0;
		bottom: 0;
	}

	/* .tui-popup-btn .tui-btn-class {
    	width: 90% !important;
    	display: block !important;
    	font-size: 28rpx !important;
    } */

	/* .tui-icon-close {
    	position: absolute;
    	top: 30rpx;
    	right: 30rpx;
    } */

	.tui-product-box {
		display: flex;
		align-items: flex-end;
		font-size: 24rpx;
		padding-bottom: 30rpx;
	}

	.tui-popup-img {
		height: 200rpx;
		width: 200rpx;
		border-radius: 24rpx;
		display: block;
	}

	.tui-popup-price {
		padding-left: 20rpx;
		padding-bottom: 8rpx;
	}

	.tui-amount {
		color: #f4d56f;
		font-size: 36rpx;
	}

	.tui-number {
		font-size: 24rpx;
		line-height: 24rpx;
		padding-top: 12rpx;
		color: #999;
	}

	.tui-popup-scroll {

		font-size: 26rpx;
	}

	.tui-scrollview-box {
		padding: 0 30rpx 60rpx 30rpx;
		box-sizing: border-box;
	}

	.tui-attr-title {
		padding: 10rpx 0;
		color: #333;
	}

	.tui-attr-box {
		font-size: 0;
		padding: 20rpx 0;
	}

	.tui-attr-item {
		max-width: 100%;
		min-width: 200rpx;
		height: 64rpx;
		display: -webkit-inline-flex;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: #f7f7f7;
		padding: 0 26rpx;
		box-sizing: border-box;
		border-radius: 32rpx;
		margin-right: 20rpx;
		margin-bottom: 20rpx;
		font-size: 26rpx;
	}

	.tui-attr-active {
		background: #fcedea !important;
		color: #e41f19;
		font-weight: bold;
		position: relative;
	}

	.tui-attr-active::after {
		content: '';
		position: absolute;
		border: 1rpx solid #e41f19;
		width: 100%;
		height: 100%;
		border-radius: 40rpx;
		left: 0;
		top: 0;
	}

	.tui-number-box {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 20rpx 0 30rpx 0;

		box-sizing: border-box;
	}

	.bottom {

		display: flex;
		flex: 1;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
		background-color: #0c0d13;
	}

	.golden-title {

		color: #f4d56f;
		font-family: Barlow Semi Condensed;
		font-weight: 500;
		line-height: 56rpx;
		text-shadow: 0 4rpx 8rpx rgba(3, 3, 3, .5);
		width: 750rpx;
		text-align: center;
		font-style: italic;

	}

	.golden-title text {
		justify-content: center;
		margin-top: 2rpx;
		font-size: 48rpx
	}

	/* 商品列表*/

	.tui-product-list {
		margin: 20rpx;
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: wrap;
		box-sizing: border-box;
		/* padding: 10rpx 0rpx; */
	}


	.tui-product-container {
		width: 49%;
		/* 	display: flex;
    	justify-content: space-between;
    	flex-wrap: wrap;
    	flex: 1; */
		margin-right: 2%;
	}

	.yui-pricebox {
		font-size: 26rpx;
		margin-left: 4rpx;
		margin-top: 4rpx;
	}

	.tui-product-container:nth-child(2n) {
		margin-right: 0;
	}


	.tui-pro-item {
		width: 100%;
		margin-bottom: 10rpx;
		background: #212a36;
		box-sizing: border-box;
		border-radius: 12rpx;
		overflow: hidden;
		transition: all 0.15s ease-in-out;
	}

	.tui-flex-list {
		display: flex;
		margin-bottom: 1rpx !important;
	}

	.tui-pro-img {
		width: 100%;
		display: block;
	}

	.tui-proimg-list {
		width: 260rpx;
		height: 260rpx !important;
		flex-shrink: 0;
		border-radius: 12rpx;
	}

	.tui-pro-content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.tui-pro-tit {
		color: #777777;
		font-size: 26rpx;
		word-break: break-all;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}



	.tui-sale-price {
		display: flex;
		font-size: 30rpx;
		font-weight: 500;
		color: #f4d56f;
	}

	.tui-sale-prices {
		font-size: 28rpx;
		font-weight: 500;
		color: #e41f19;
	}

	.tui-factory-price {
		font-size: 24rpx;
		color: #a0a0a0;
		text-decoration: line-through;
		padding-left: 12rpx;
	}

	.tui-pro-pay {
		padding-top: 10rpx;
		font-size: 24rpx;
		color: #656565;
	}

	.affiliate_page .top_link.right .link_btn_img_box {
		width: 70rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(244, 213, 111, .7);
		background-color: rgba(37, 31, 20, .5);
	}

	.affiliate_page .top_link.right .link_btn_img_box_active {
		width: 68rpx;
		height: 48rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 8rpx;
		border: solid 2rpx rgba(255, 255, 255, .7);
		background-color: #251f14;
	}

	.affiliate_page .top_link.right .link_btn_img_box_active image {
		width: 70%;
		height: 100%;
	}

	.affiliate_page .top_link.right .link_btn_img_box image {
		width: 70%;
		height: 100%;
	}

	image {
		overflow-clip-margin: content-box;
		overflow: clip;
	}

	.buy {
		padding-top: 20rpx;
		padding-bottom: 20rpx;
		display: flex;
		flex-direction: row;

	}

	.button_buy {
		background-color: #f4d56f;
		width: 200rpx;
	}
</style>